<template>
    <div class="arco-tabs-content " style="width: 90%">

        <a-space direction="vertical" size="large" style="width: 100%">

            <a-tabs position="left" style="width: 100%">
                <a-tab-pane key="1" title="WHO对毒品的分类">

                    <a-timeline mode="alternate" labelPosition="relative" style="margin-top: 10px">
                        <a-timeline-item v-for="i in dataSource">
                            <a-row :style="{ display: 'inline-flex', alignItems: 'center'

                            }">
                                <img
                                        width="180"
                                        :style="{ marginBottom: '12px' }"
                                        :src="i.imageUrl"
                                />
                                <div :style="{ marginBottom: '20px' }">
                                    {{i.title}}
                                    <div :style="{ fontSize: '14px', color: '#4E5969' ,margin: ' 0px 20px 0px 0px'}">
                                        {{i.content}}
                                    </div>
                                </div>
                            </a-row>
                        </a-timeline-item>
                    </a-timeline>

                </a-tab-pane>
                <a-tab-pane key="2" title="青少年毒品预防教育宣传片">

                    <h2>动画科普禁毒知识，江苏南京推出青少年毒品预防教育宣传片</h2>

                    <video width="100%" height="540" controls>
                        <source src="https://vodpub1.v.news.cn/original/20231220/2ce7eedbfc434627b810c4fb36d4e7c2.mp4" type="video/mp4">
                        <source src="movie.ogg" type="video/ogg">您的浏览器不支持 video 标签。
                    </video>

                    <!--<div :style="{display: 'flex', width: '100%', boxSizing:
                    'border-box',padding: '20px', flexWrap: 'wrap' }">

                        <a-card :style="{ width: '200px',margin: '5px 40px 40px 5px '}" hoverable class="card-demo"
                                v-for="i in dataSource">

                            &lt;!&ndash; 卡片封面 &ndash;&gt;
                            <template #cover>
                                <div
                                        :style="{height: '150px',overflow: 'hidden'}"
                                >
                                    <img
                                            :style="{ width: '100%', transform: 'translateY(-20px)' }" alt="dessert"
                                            :src="i.imageUrl"
                                    />
                                </div>
                            </template>
                            &lt;!&ndash; 卡片元数据 &ndash;&gt;
                            <a-card-meta>


                                <template #description>
                                    <div >
                                        {{i.content}}
                                    </div>
                                </template>

                            </a-card-meta>
                        </a-card>
                    </div>-->
                </a-tab-pane>

                <!--<a-tab-pane key="3" title="Tab 3">
                    Content of Tab Panel 3
                </a-tab-pane>-->
            </a-tabs>
        </a-space>


    </div>
</template>

<script setup>


    const dataSource = [
        {
            title: '阿片类',
            content: '此类就是从罂粟蒴果的产物，通过提取以及合成制作成药物和毒品，如鸦片、吗啡、海洛因、芬太尼、哌替喧、美沙酮等，其中典型的毒品代表即海洛因。',
            imageUrl: 'https://pic2.zhimg.com/80/v2-b8cc11b149b0cb7cd69bc24e38f38f61_720w.webp'
        },
        {
            title: '可卡因类',
            content: '可卡因类是由生长于南美洲安第斯山的灌木古柯树的叶加工提出的生物碱，包括古柯碱、可卡因、克赖克等。',
            imageUrl: 'https://pic3.zhimg.com/80/v2-d5c137d436ab0e4883174f1f2b1a959e_720w.webp'
        },
        {
            title: '大麻类',
            content: '大麻类物质包括大麻属植物大麻（一般作为毒品使用的是亚洲大麻的一个变种，称为印度大麻）和提炼而成的大麻脂、大麻烟、大麻油。',
            imageUrl: 'https://pic4.zhimg.com/80/v2-ca08ca7d0fa26092ad202317ab72f407_720w.webp'
        },
        {
            title: '中枢神经兴奋剂类',
            content: '对中枢神经系统呈现兴奋效应的，并且具有精神依赖成瘾的药物，包括苯丙胺、甲基苯丙胺、亚甲基二氧基甲基苯丙胺、咖啡因等。其中以甲基苯内胺类为主，即臭名昭著的冰毒。',
            imageUrl: 'https://pic3.zhimg.com/80/v2-003bebf48c717971d416419faf5b5b1a_720w.webp'
        },
        {
            title: '酒精以及中枢神经抑制药类',
            content: '酒精即乙醇，一种镇静剂，也是一种全身性、非特异性的中枢神经系统抑制剂。我国约有五千万左右的酒精成瘾者。中枢神经抑制药临床多用于镇静、催眠、治疗焦虑、解除肌肉痉挛、控制癫闲发作等的镇静催眠药物，品种众多，可以分为两大类：巴比妥类：如苯巴比妥、异戊巴比妥、司可巴比妥等；苯二氮卓类：地西泮、艾司唑仑、咪达唑仑等',
            imageUrl: 'https://th.bing.com/th/id/R.62099bdca930d4cf7f6c5829ca894b75?rik=H0I6225HMpkjuA&riu=http%3a%2f%2fp3.itc.cn%2fimages01%2f20200813%2fa314271543834f12a2cecdeee41b7bfe.jpeg&ehk=Wd%2bhShO0vN1GC27x9LKmOTf0RUlBipNfLYerS3zw44w%3d&risl=&pid=ImgRaw&r=0'
        },
        {
            title: '致幻剂类',
            content: '来自人们日常生活使用的油漆稀释剂、去涂料剂、香蕉水、松节油、胶水、汽油、煤油和其他石油制品、' +
                '这是一类能引起精神症状的药物，用药后可改变正常情绪、感知和思维状态，亦称为“似精神病药”。包括麦角酸二乙胺（LSD）、二甲基色胺（DMT）、祼素菇素、苯环利定（PCP ）等。',
            imageUrl: 'https://pic2.zhimg.com/80/v2-7e16a459216004c0806a653b73c46789_720w.webp'
        },
        {
            title: '挥发性有机溶剂类',
            content: '来自人们日常生活使用的油漆稀释剂、去涂料剂、香蕉水、松节油、胶水、汽油、煤油和其他石油制品、打火机和清洁用液体以及各种气溶胶剂等。有机溶剂和鼻吸剂包括一系列挥发性很强的化合物，有效成分包括甲苯、丙酮、苯、四氯化碳、乙醚及各种酒精和乙酸盐。它们能像抑制剂一样对中枢神经系统起作用，长期吸食有可能导致知觉受损、失去协调和判断能力、呼吸抑制和脑部受损。',
            imageUrl: 'https://pic4.zhimg.com/80/v2-82d2bc8ef130fc262f530b7322db9243_720w.webp'
        },
        {
            title: '烟草类',
            content: '作为使用最广泛的“合法毒品”-烟草，是我们在日常生活处处可见的。其主要含有尼古丁、焦油、一氧化碳等多种有害成分。其中尼古丁为主要的致依赖性物质，有剧毒，对中枢神经系统、周围神经系统、心血管系统以及身体器官都能产生强烈的作用。',
            imageUrl: 'https://pic3.zhimg.com/80/ea7976ef242290c4b6400c6d01b31dc6_720w.webp'
        },

    ]


</script>

<style scoped>

    .arco-tabs-content {
        box-sizing: border-box;
        width: 100%;
        padding-top: 16px;

    }

</style>